<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="../static/layui/layui.js"></script>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <script type="text/javascript" src="../static/js/lay-config.js"></script>
    <title>TableSelect</title>
    <style>
        .layui-table-cell{
            text-align:center;

            height: auto;

            white-space: normal;

        }

        .layui-table img{
            max-width:300px
        }
        .goods-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin: -10px;
        }

        .layui-card {
            flex: 0 0 calc(25% - 20px); /* 25%宽度，减去margin和border的20px */
            text-align: center;
            margin: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            transition: box-shadow 0.3s ease-in-out;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .layui-card:hover {
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        }

        .layui-card-img-top {
            width: 80%; /* 缩小图片宽度 */
            height: 300px; /* 调整图片高度 */
            object-fit: cover;
            margin: 20px auto; /* 上下留白 */
            border-radius: 10px; /* 圆润边角 */
        }

        .layui-card-body {
            padding: 0px;
        }
        .video-block {
            margin-right: 15px; /* 设置块之间的间隔 */
            margin-bottom: 15px; /* 设置块之间的间隔 */
            float: left; /* 设置浮动 */
            width: 23%; /* 设置块的宽度，确保每行有四个块 */
            position: relative; /* 设置相对定位，以便子元素使用绝对定位 */
        }

        .video-block img {
            width: 100%; /* 设置封面大小 */
            height: auto; /* 保持宽高比例 */
            cursor: pointer; /* 设置鼠标悬停样式为手型 */
        }

        .video-info {
            position: absolute; /* 设置绝对定位 */
            bottom: 0; /* 置于父元素底部 */
            left: 0; /* 置于父元素左侧 */
            width: 100%; /* 占满整个父元素宽度 */
            background-color: rgba(0, 0, 0, 0.7); /* 添加背景色，使文字更易读 */
            padding: 5px; /* 添加内边距，增加样式 */
            box-sizing: border-box; /* 设置盒模型为边框盒，防止宽度溢出 */
            display: none; /* 初始隐藏，仅在悬停时显示 */
        }

        .video-info p {
            color: #fff; /* 设置文字颜色为白色 */
            margin: 0; /* 移除默认的外边距 */
        }

        .video-title {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin: 5px 0; /* 调整标题的上下边距 */
        }

        .video-block:hover .video-info {
            display: block; /* 鼠标悬停时显示 */
        }

        .layui-container {
            margin: 0 auto; /* 设置容器水平居中 */
        }
        .beian-info {
            text-align: center; /* 文本居中 */
            padding: 10px 0; /* 增加上下内边距 */
            background-color: #f2f2f2; /* 背景色，可根据需要更改 */
            font-size: 14px; /* 字体大小 */
            color: #666; /* 字体颜色，可根据需要更改 */
        }
    
        .beian-info img {
            vertical-align: middle; /* 图片垂直居中 */
            height: 20px; /* 调整图片高度 */
            margin-right: 5px; /* 在图片和文本之间增加一些间距 */
        }
    </style>
</head>

<body>
<div class="layui-row" style="background-image: url('../static/head_background.png'); background-size: cover;">
    <div class="layui-col-md1">
        <a href="/">
            <img src="../static/logo.png" class="layui-logo" style="height:55px; width: 120px;">
        </a>
    </div>

    <div class="layui-col-md8" action="" style="padding:11px">
        <!-- 添加搜索框 -->
        <div class="layui-input-inline" action="" style="width:850px">
            <input type="text" id="searchInput" placeholder="请输入" class="layui-input">
        </div>
        <button class="layui-btn" id="searchBtn">
            <i class="layui-icon layui-icon-search"></i>
        </button>
    </div>
    <div class="layui-col-md3">
        <ul class="layui-nav" style="padding: 0px; bottom: 3px; background-color: transparent;">
            <li class="layui-nav-item">
                <a href="/user/car" style="color: gray;">关注</a>
            </li>
            <li class="layui-nav-item">
                <a href="/chat" style="color: gray;">投稿</a>
            </li>
            <li class="layui-nav-item">
                <a href="/user/car" style="color: gray;">消息<span id="cart-badge" class="layui-badge">0</span></a>
            </li>
            <li class="layui-nav-item">
                <a href="/v1/personal" style="color: gray;"><img src="../static/gou.png" class="layui-nav-img">我</a>
                <dl class="layui-nav-child">
                    <dd><a href="/v1/personal">用户信息</a></dd>
                    <dd><a href="/password">修改密码</a></dd>
                    <dd><a href="/loginout">退出</a></dd>
                </dl>
            </li>
        </ul>
    </div>
</div>

<div class="layui-row">
    <div><img src="../static/shalou.png"></div>
</div>


<div class="layui-row" style="padding: 8px">
    <div class="layui-col-md1" style="left: 20px">
        <button type="button" class="layui-btn layui-btn-xs" >
            <a href="/show/shop">全部</a>
        </button>
    </div>
    <div class="layui-col-md11" style="right: 30px">
         <span class="layui-breadcrumb" lay-separator="">
             <a href="/show/shop" data-type="1">美食</a>
            <a href="/show/shop" data-type="2">生活</a>
            <a href="/show/shop" data-type="3">情感</a>
            <a href="/show/shop" data-type="4">游戏</a>
            <a href="/show/shop" data-type="5">娱乐</a>
            <a href="/show/shop" data-type="6">音乐</a>
            <a href="/show/shop" data-type="7">知识</a>
            <a href="/show/shop" data-type="8">电影</a>
            <a href="/show/shop" data-type="9">纪录片</a>
            <a href="/show/shop" data-type="10">电视剧</a>
            <a href="/show/shop" data-type="11">新闻</a>
         </span>
    </div>
</div>





<div class="layui-container">
    <div class="layui-row layui-col-space15" id="videoList">
        <!-- Video Blocks will be dynamically added here -->
    </div>
</div>

<div class="beian-info">
    <a href="https://beian.miit.gov.cn/" target="_blank">湘ICP备2023029487号-1</a>
    <img src="../static/beian.png" alt="备案图标">
    <a href="https://beian.mps.gov.cn/#/query/webSearch?code=42900602000319" rel="noreferrer" target="_blank">鄂公网安备42900602000319</a>
</div>


<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    $(function () {
        // 构造请求参数
        var requestData = {
            "limit": 12,
            "offset": 0,
            "order_by": "id",
            "asc": true,
            "name": "",
            "acc": false
        };

        // 使用 Layui 的 Ajax 发送 POST 请求
        layui.use('jquery', function () {
            var $ = layui.jquery;
            var token = getCookie("token");
            $.ajax({
                url: 'http://43.143.232.128:31000/v1/search/videos',
                method: 'POST',
                headers: {
                    'Authorization': 'Bearer ' + token
                },
                contentType: 'application/json',  // 设置请求头为 JSON
                data: JSON.stringify(requestData),  // 将请求参数转为 JSON 字符串
               
                success: function (data) {
                    if (data.code === 0) {
                        renderVideoBlocks(data.data);
                    } else {
                        console.error('Failed to fetch video data');
                    }
                },
                error: function () {
                    console.error('Failed to fetch video data');
                }
            });
            function getCookie(name) {
                var value = "; " + document.cookie;
                var parts = value.split("; " + name + "=");
                if (parts.length === 2) return parts.pop().split(";").shift();
            }
        });

        // 渲染视频块
        function renderVideoBlocks(videoData) {
            var container = $('#videoList');
            container.empty();

            var rowContainer;  // 用于存储当前行的容器

            videoData.forEach(function (video, index) {
                if (index % 4 === 0) {
                    // 创建新的一行
                    rowContainer = $('<div class="layui-row"></div>');
                    container.append(rowContainer);
                }

                var videoBlock = $('<div class="layui-col-md2 video-block">' +
                    '<a href="/v1/videos/detail/' + video.id + '">' +
                    '<img src="' + video.coverUrl + '" alt="' + video.title + '">' +
                    '</a>' +
                    '<div class="video-info">' +
                    '<p>简介：' + video.introduce + '</p>' +
                    '<p>作者: ' + video.username + '</p>' +
                    '</div>' +
                    '<p class="video-title">' + video.title + '</p>' +
                    '</div>');

                rowContainer.append(videoBlock);
            });

            // 使用 Layui 的模块化样式渲染
            layui.use('element', function () {
                var element = layui.element;
                element.init();
            });
        }
    });
</script>
</body>
</html>